@charset "utf-8";
@import "variables";
@import 'base';
@import 'ui';
@import 'iconfont';

[v-cloak] { display: none; }

/* payment */
.payment {
  text-align: center;
  &> .mn > .title {
    display: block;
    width: 100%;
    height: auto;
    margin: 5.5rem 0 4rem 0;
    font-size: 16px;
    color:$title-font;
    text-align: center;
  }
    .newPlate{
      text-align: center;
      color:$title-font;
      font-size: 14px;
      margin:1.5rem 0 3.5rem 26rem ;
      label {
        display: inline-block;
        font-size: 16px;
       /* &:before {
          content: "";
          margin-right: .5rem;
          background: url("../../static/btn_choice_hov.png");
          width: 1.5rem;
          height: 1.5rem;
          background-size: cover;
          display: inline-block;
          vertical-align: middle;
          margin-top: -5px;
        }*/
      }
    }
  .plate{
    margin-top: 4.5rem;
    i{
      width: 2rem;
      margin-right: 1rem;
      display: inline-block;
      margin-bottom: 3rem;
      img{
        width: 100%;
      }
    }
    a{
      font-size: 15px;
      color: $title-font;
      padding: 0 .2rem .4rem .2rem;
      border-bottom:1px solid #dcdcdc;
    }
  }
  .bot-tips{
    position: absolute;
    bottom: 0;
    font-size: 14px;
    color: $title-font;
    @include leftcenter;
    margin-bottom: 4.5rem;
  }
}
.ui-input {
  display: inline-block;
  @extend .clearfix;
  > .input {
    background: #fff;
    width: 4.2rem;
    @include height-line(4.2rem);
    @include box-sz;
    font-size: 22px;
    color: #1a1a1a;
    border: 1px solid #c8c8c8;
    float: left;
    border-right: none;
    &:first-child {
      border-radius: 5px 0 0 5px;
    }
    &:last-child {
      border-right: 1px solid #c8c8c8;
      border-radius: 0 5px 5px 0;
    }
    .in-info{
      display: block;
      width: 4.2rem;
      position: absolute;
    }
    .in-span{
      display: block;
      position: absolute;
      width: 1.2rem;
      margin-left: 1.45rem;
      height: 2px;
      background: #4895e4;
      visibility: hidden;
      margin-top: 3.6rem;
    }
  }
}


/*animate*/
.isfocus{
  visibility: visible !important;
  transition:all 0.2s ease-in-out;
  /*通过transform的缩放scale来让初始时x轴为0*/
  transform: scale3d(3,1,1);
  /*将坐标原点移到元素的中间，以原点为中心进行缩放*/
  transform-origin:50% 0;
}

.query>button{
  @extend .btn-search
}
/*新能源车牌*/

/* 底部弹出面板 */
.panel{
  width: 100%;
  .hd{
    display: block;
    width: 100%;
    color: #000;
    height: 2.3em;
    line-height: 2.3em;
    background-color: #fff;
    >.close{
      float: right;
      margin-right: 1em;
    }
  }
  .bd{
    display: inline-block;
    text-align: center;
    @extend .clearfix;
    padding: 2.1rem 0;
    padding-left: .5rem;
    button{
      @include row-button
    }
    .delete{
      font-size: 2.8rem;
      margin-top: 8px;
      float: left;
      margin-left: 2rem;
      &:active{
        outline: none;
        background: none;
      }
    }
    .un-use{
      background: #fcfcfc;
      color: #c8c8c8;
    }
    .row1{
      @include row;
    }
    .row2{
      @include row;
    }
    .row3{
      @include row;
    }
    .row4{
      @include row;
      margin-bottom: 0;
    }
  }
}

/* no-result */
.no-result{
  display: block;
  color: #1a1a1a;
  text-align: center;
  font-size: 18px;
  letter-spacing: .05em;
  margin: 0 auto;
  >.img{
    width: 100%;
    height: auto;
  margin-bottom: 5rem;
  }
  .p1{
    margin-top: 3em;
    color: $title-font;
  }
  .p2{
    color: $title-font;
    line-height: 2em;
  }
  .c-y{
    color: #f9c50f;
  }
}


/* pay */
.pay {
  display: block;
  font-size: 1.6em;
  background-color: #fff;
  width: 100%;
  height: 100%;
  .hd{
    display: block;
    width: 100%;
    padding: 5rem 0;
    //height: 8em;
    >.cash{
      font-size: 3rem;
      text-align: center;
      color: #4895ec;
    }
    >.time{
      margin-top: 2rem;
      font-size: 1.6rem;
      text-align: center;
      line-height: -.1em;
      &:before{
        position: relative;
        display: inline-block;
        content: "";
        background: url("/static/icon_p@2x.png");
        background-size: cover;
        width: 1em;
        height: 1em;
        vertical-align: -.15625em;
        margin-right: 6px;
      }
    }
  }
  .bd{
    height: 100%;
    &:before{
      display: block;
      position: relative;
      content: "";
      height: 1rem;
      width: 100%;
      background-color: #f2f2f2;
    }
    .pay-btn{
      margin-top: 6rem;
      >.c-pay{
        background-color: #4895ec !important;
        @extend .btn-search
      }
    }
    .bd-group{
      height: 5rem;
      padding: 0 15px;
      color: $title-font;
    }
    .warn{
      width: 80%;
      font-size: 1.4rem;
      margin:0 auto;
      margin-top: 4.5rem;
      text-align: center;
      color: $title-font;
      &:after{
        display: block;
        position: relative;
        bottom: 0;
        height: auto;
        background-color: #fff;
      }
    }
  }
}

/* pay-success */
.pay-success {
  .status{
    color: #4895ec;
    width: 100%;
    text-align: center;
    font-size: 6rem;
    margin-top: 5rem;
  }
  .label{
    display: block;
    font-size: 1.6rem;
  }
  .cash {
    width: 100%;
    text-align: center;
    color: #1a1a1a;
    margin-top: 6.5rem;
    .company{
       font-size: 1.5rem;
      color: #1a1a1a;
    }
    .price{
      font-size: 2.5rem;
      margin-top: 1.5rem;
    }
  }
  .submit-btn{
    >button{
      @extend .btn-search;
      margin-top: 9rem;
    }
  }
  .remark{
    margin:0 auto;
    margin-top: 4.5rem;
    width: 90%;
    font-size: 1.4rem;
  }
}

